<template>
	<view class="group_container">
		<view class="goods_img_wrap">
			<u-swiper :list="banners" height="360rpx" circular indicator @change="e => currentNum = e.current"
				:indicatorStyle="{'text-align': 'center', 'bottom': '60rpx'}" @click="handleClickSwiper">
			</u-swiper>
		</view>
		<view class="list_wrap pr bc_fff plr_16 minh_100">
			<u-sticky offsetTop="0">
				<view class="tabs_wrap">
					<u-tabs :current="currentType" :list="cateList" keyName="typeName" lineColor="#F93914"
						itemStyle="font-size:28rpx;padding: 20rpx 16rpx;background: #fff; " activeStyle="color: #F93914"
						inactiveStyle="color: #000000" lineWidth="32rpx" lineHeight="6rpx"
						@change="handleGoodsType"></u-tabs>
				</view>
			</u-sticky>
			<view class="ptb_8" v-for="item,index in dataList" :key="index">
				<GoodsCard :data="item" type="group-card" goodsType="5" />
			</view>
			<view class="ptb_16">
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import dataMixin from '@/mixins/data.js'
	import bannerMixin from '@/mixins/banner.js'
	import cateMixin from '@/mixins/cate.js'
	export default {
		mixins: [dataMixin, bannerMixin, cateMixin],
		components: {
			GoodsCard
		},
		data() {
			return {
				currentNum: 0,
				dataInfo: {
					banner: []
				},
				listUrl: '/goods/api/product/groupProductList',
				params: {
					userType: this.$store.state.userInfo.identityType || 1,
					functionRange: this.$store.state.functionRange
				},
				dataList: [],
				bannerId: 6, // banner位置
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
			}
		},
		onLoad() {
			this.getCateList()
		},
		onShow() {
			this.getAllData()
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getBannerData(), this.getData(true)]).then(() => {
					uni.hideLoading()
				})
			},
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/pages/detail?id=${item.id}&type=5`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_container {
		.list_wrap {
			top: -32rpx;
			margin-top: -16rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
	}
</style>